{% extends 'myindex.html'%}
{% block content%}

{% load static %}
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="{% static 'css/test.css'%}">
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://code.highcharts.com.cn/highstock/highstock.js" type="text/javascript"></script>

    <div id="loading">
         <img src="/static/images/loading.gif" alt="loading..." style="width:80%;height:80%;"/>
    </div>
    <div>
        <span id="pagetitle">highcharts & datatable测试页面</span>
    </div>

    <div id="contain"></div>
	<div id="two">
        <p id="title" style="margin:0 38%;">车辆</p>
        <button id="show">筛选所需列</button>
    </div>

    <div id="cbox" style="display:none;">
        {% for i in tablehead%}
        <label class="typecheck"><input type="checkbox" value="{{i.title}}" class="cb" checked>{{i.title}}</label>
        {% endfor %}
        <input type="button" id="select_all" value="全选" >
        <input type="button" id="cancle_all" value="全不选">
    </div>

    <div id="huabiaoge">
        <table id="example" class="cell-border compact">
        </table>
    </div>
    <script>
         var data1 = {{context|safe}};
         var pt = {{pt|safe}};
         var gsq = {{gsq|safe}};
		 var lat = {{lat|safe}};
         var vel = {{vel|safe}};
         var satellite_num = {{satellite_num|safe}};
         
         var tablehead = {{tablehead|safe}};
    </script>
    <script src="{% static 'js/blake_test.js' %}"></script>
{% endblock %}